<template>
    <h4>to系列api</h4>
    <hr>
    <div @click="changeObj">toRef: {{obj1}}</div>
    <div>{{age}}</div>

    <hr>
    <div @click="changeObj2">toRefs: {{obj2}}---{{num}}</div>

    <hr>
    <div v-on:click="changeObj3"> {{str}}-------{{obj3}}</div>
    <div v-on:click="changeObj4">toRaw: {{obj32}}</div>
</template>


<script lang="ts" setup>
import { ref, toRefs, reactive, toRaw, toRef } from "vue";

// toRef 将非响应式的对象部分属性变成ref对象（响应式）-
// --是对原数据的引用 值改变原数据也会改变，但是视图不会更新
let obj1 = {
    name: 'zhanhsan',
    age: 30
};

let age = toRef(obj1, 'age');

let changeObj = function () {
    // obj1.age ++;
    age.value++;
    console.log('changeObj', obj1, age);
}



// toRefs 可以帮我们批量创建ref对象主要是方便我们解构使用
// 但是如果原来的响应式对象数据改变，那么toRaw的也会改变且视图会更新，是对原数据的引用

let obj2 = reactive({
    dog: 'lisi',
    color: 'green',
    num: 1
});

let { num } = toRefs(obj2);

const changeObj2 = function() {
    obj2.num++;
    num.value++;
};


// toRaw 将响应式对象转化为普通对象---普通类型不行（只能处理reactive的响应式数据）

let str = ref('hello');
let obj3 = reactive({
    count: 0
});

let str2 = toRaw(str);
let obj32 = toRaw(obj3);
let changeObj3 = () => {
    str.value = 'hello word!!!';
    obj3.count++;
    console.log('changeObj3:', str, obj3);
};

let changeObj4 = () => {
    obj32.count++
    console.log('changeObj32:', str2, obj32);
};

</script>
<style lang="less" scoped>

</style>